import React from 'react';
import { Font } from 'components/page';
import { client } from 'assets/client.js';
import { Row, Col } from 'antd';
import './Two.less';
import product from 'images/home/producLine.jpg';
import factoryIcon from 'images/home/factoryIcon.svg';
import worker from 'images/home/worker.svg';
import point from 'images/home/point.svg';

const text = {
    title: [
        {
            icon: factoryIcon,
            content: '60,000m',
            description: 'Area Covered',

        }, {
            icon: worker,
            content: '300',
            description: 'worker',
        }
    ],
    content:[
        "Established: In 1991",
        "Cover area: 60000m",
        "R&D Strength: More than 300 emplays, and more than 50 are R&D personnel and senior technical engineers.",
        "Product range: Specialized in constructional aluminum, industrial alminum profiles and etc..",
        "Factory Strength: Posseswelve modern aluminum extrusion production lines of 600 to 2500 ton and the capacity is more than 50,000 tons."
    ]
}
class Two extends React.Component{
    state = {
        font: client.font("ABOUT SILVERCHIN", "COMPANYOVERVIEW"),
        title: text.title,
        content: text.content,
    }
    
    render(){
        console.log(this.state.content);
        return(
            <div className="two">
                <Font titleStr={this.state.font} />
                <div className="two-content">
                    <Row type="flex" justify="center" className="two-content-row" >

                        <Col lg={8} md={24} sm={24} xs={24} className="two-content-row-img" >
                            <div><img src={product} /></div>
                        </Col>
                        <Col lg={8} md={24} sm={24} xs={24} className="two-content-row-content">
                            <div  className="two-content-row-text" >
                                {this.state.title.map((value, index) => {
                                    return <div className="two-content-row-text-title">
                                    
                                        <div className="two-content-row-text-title-avatar">
                                            <span><img src={value.icon} /></span>
                                        </div>

                                        <div className="two-content-row-text-title-content">
                                            <h2>{value.content}{ !index ? <sup>2</sup> : ''}</h2>
                                            <div className="two-content-row-text-title-content-description">{value.description}</div>
                                        </div>
                                    </div>
                                })}
                                

            
                            </div>

                            <div className="two-content-row-content-list">
                                {this.state.content.map((value) => {
                                    return <div className="two-content-row-content-list-title">
                                        <div className="two-content-row-content-list-title-avatar">
                                            <span><img src={point} /></span>
                                        </div>

                                        <div className="two-content-row-content-list-title-content">
                                            
                                            <div className="two-content-row-content-list-title-content-description">
                                                {value}
                                            </div>
                                        </div>
    
                                    </div>
                                })}
                            </div>

                            {/* 按键 */}
                            <div className="two-content-row-content-button"><span>VIEW MORE</span></div>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

export default Two;